<template>
  <el-menu-item
    v-if="!props.meunItem.children || props.meunItem.children.length <= 0"
    :index="props.meunItem.path"
    :route="{ name: props.meunItem.path }"
  >
    <SvgIcon v-if="props.meunItem.icon" class="icon-svg" :name="props.meunItem.icon" />
    <template #title>
      <span style="margin-left: 5px">{{ props.meunItem.name }}</span>
    </template>
  </el-menu-item>
  <el-sub-menu v-else :index="props.meunItem.path">
    <template #title>
      <SvgIcon v-if="props.meunItem.icon" class="icon-svg" :name="props.meunItem.icon" />
      <span style="margin-left: 5px">{{ props.meunItem.name }}</span>
    </template>
    <SidebarItem v-for="item in props.meunItem.children" :key="item.path" :meun-item="item" />
  </el-sub-menu>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

interface Props {
  meunItem: any;
}

const props = defineProps<Props>();
</script>

<style lang="scss" scoped>
.icon-svg {
  font-size: 16px;
}
</style>
